<template>
  <div>
    <!--表格对象-->
    <Table
      :table="table"
      :isTreeTable="true"
      :tableColumns="tableColumns"
      :loadTableList="loadTableList"
      :changePageSize="changePageSize"
      :changePage="changePage"
      :operatorColumnWidth="300"
      :pagination="false"
      :showTableCheckbox="true"
      :baseUrl="urls.API_URL_BACKSTAGE_PERMISSION_MANAGE"
      @addRow="addRow"
      @selectionChange="handleSelectionChange"
      @editRow="editRow"
    >
      <!--表格行的工具栏-->
      <template #table_operator_left="scope">
        <el-button type="primary" size="small" icon="Plus" plain @click="addRow(scope.row.id)">添加</el-button>
      </template>
      <!--默认菜单名称-->
      <template #table_column_name="scope">
        <el-icon v-if="scope.row['iconCls']">
          <component :is="scope.row['iconCls']"></component>
        </el-icon>
        {{ scope.row['name'] }}
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
// 导入表格组件
import Table from '@/components/base/table/TableComponent.vue';
import { defineProps, ref } from 'vue';
// 导入element插件对象
import { ElMessage } from 'element-plus';
// 导入字典
import { permissionLinkTypeDict, permissionTypeDict, yesOrNoDict } from '@/api/dict';
// 导入项目接口
import type { TableColumn, TableData } from '@/types/interface/base_interface';
import type { Role } from '@/types/interface/auth_interface';
import urls from '@/api/request/urls';

import { defineEmits } from 'vue';
const emit = defineEmits(['addRow', 'editRow']);

// 接收父组件传递过来的值
interface Props {
  // 需要在父组件引入自定义的@/api/uem/useTableList.ts组件，然后将其中的部分属性传过来
  table: TableData; // 表格对象，包含表格数据和分页信息。表格数据实际业务并不需要，偷懒写法
  loadTableList: () => void; // 重新加载表格
  changePageSize: (page: number) => void; // 当每页数据显示数发生变化时触发的一个函数
  changePage: (page: number) => void; // 当页面发生变化时触发的一个函数
}
const props = defineProps<Props>();

// 定义表格所有的列字段信息
const tableColumns = ref<TableColumn[]>([
  {
    label: '菜单名称',
    prop: 'name',
    fixed: true,
    align: 'left',
    width: 200,
    type: 'custom'
  },
  // {
  //   label: '图标',
  //   prop: 'iconCls',
  //   width: 60,
  //   type: 'icon',
  // },
  {
    label: '类型',
    prop: 'type',
    width: 80,
    type: 'dict',
    dict: permissionTypeDict
  },
  {
    label: '打开方式',
    prop: 'linkType',
    width: 90,
    type: 'dict',
    dict: permissionLinkTypeDict
  },
  {
    label: '权限标识',
    prop: 'permission',
    width: 200,
    align: 'left'
  },
  {
    label: '组件名称',
    prop: 'component',
    width: 200
  },
  {
    label: '组件地址',
    prop: 'path',
    width: 200,
    align: 'left'
  },
  {
    label: '路由地址',
    prop: 'route',
    width: 200,
    align: 'left'
  },
  {
    label: '排序',
    prop: 'sort',
    width: 70
  },
  {
    label: '可用状态',
    prop: 'enabled',
    width: 90,
    type: 'dict',
    dict: yesOrNoDict
  },
  {
    label: '显示状态',
    prop: 'display',
    width: 90,
    type: 'dict',
    dict: yesOrNoDict
  },
  {
    label: '要求登录',
    prop: 'requireAuth',
    width: 90,
    type: 'dict',
    dict: yesOrNoDict
  },
  {
    label: '使用角色',
    prop: 'roleNumber',
    width: 90
  },
  {
    label: '创建时间',
    prop: 'createTime',
    width: 180
  }
]);

// 当表格复选框改变
const multipleSelection = ref<Role[]>([]); // 复选框选择的记录row
const handleSelectionChange = (selection: []) => {
  // 当选择项发生变化时会触发该事件，这里用于获取选择的记录（多选）.value可以获取所有选择了的行记录row
  multipleSelection.value = selection;
};

// 点击添加按钮，交由父组件处理
const addRow = (id: number) => {
  // id是部门的主键，表示在该部门下添加子部门信息
  emit('addRow', id);
};

// 编辑按钮操作
const editRow = (row: Role): void => {
  emit('editRow', row);
};

// 添加子部门按钮操作
// const addChildNow = (row:Role):void => {
//   proxy.$emit('editRow', row);
// };
</script>
<style lang="scss" scoped></style>
